<template>
	<view>
		<view class="content">
		    <view class="titleContent">
				<view class="titleContent_title">历史搜索</view>
				<view class="titleContent_clear" @click="clickToClear">
					<view class="titleContent_clear_img">
						<image src="/static/images/icon_delete.png" mode="aspectFill"></image>
					</view>
					<view class="titleContent_clear_text">清空</view>
				</view>
			</view>
			<view class="boxContent">
				<view class="box" v-for="(item, index) in listData" :key="index" @click="clickToValue(item)">
					<view class="box_text">
						{{ item}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props:{
			listData: {
				type: Array,
				default:function() {
					return []
				}
			}
		},
		methods: {
			clickToClear() {
				this.$emit("clickToClearHistoryCallback")
			},
			clickToValue(value) {
				this.$emit("clickToHistoryValue", value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		margin: 0px 15px;
		margin-bottom: 25px;
		
		.titleContent{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
			.titleContent_title{
				font-size: 18px;
				font-weight: 700;
			}
			.titleContent_clear{
				display: flex;
				justify-content: center;
				align-items: center;
				.titleContent_clear_img{
					width: 36rpx;
					height: 36rpx;
					flex-shrink: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.titleContent_clear_text{
					font-size: 13px;
					color: #A5A5A5;
				}
			}
		}
		.boxContent{
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			width: 100%;
			.box{		
				margin-top: 10px;
				margin-right: 10px;
				justify-content: center;
				align-items: center;
				background-color: #EDEDED;
				border-radius: 5px;
				
				.box_text {
					font-size: 16px;
					color: #3D3D3D;
					margin: 8px 8px;
				}
			}
		}
		
	}
</style>